<template>
    <div >
      普通文件上传
      <div>
        <input type="file" @change="uploadFile" />
      </div>
      <button @click="uploadBtn">点击上传</button>
      <div class="progress">
          <div class="progress-bar"></div>
      </div>
      <!-- 上传进度、花费时间 -->
       <div>
          <div>花费时间：{{spendTime + '秒'}}</div>
       </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  export default {
    name: 'App',
    data() {
      return {
        file: null,//文件实例
        spendTime: 0,//上传耗时
        startTime: 0,//开始上传时间
        endTime: 0,//结束上传时间
      }
    },
    methods: {
      uploadFile(e) {
        // 文件本身
        this.file = e.target.files[0]
      },
      uploadBtn() {
        if (!this.file) {
          alert('没有文件不能上传！')
          return
        }
        this.startTime = new Date().getTime()
        console.log('开始上传的时间',this.startTime );
        
        this.upload()
      },
      upload() {
        
        const formData = new FormData()
      
        // 文件
        formData.append('file', this.file, this.file.name)
        // 文件名字
        formData.append('filename', this.file.name)
        axios.post('http://localhost:3001/api/upload/uploadimg', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          if (res.data.code === 200) {
            // 上传耗时的计算
            this.endTime = new Date().getTime()
            // 花费的时间计算
            this.spendTime = ((this.endTime - this.startTime) / 1000).toFixed(2)
            alert('上传成功')
          }
        })
      }
    }
  }
  </script>
  
  <style>
        .progress{
          
              width: 300px;
              height: 25px;
              border: 2px solid;
              margin-top: 10px;
              text-align: center;
          }
          .progress-bar{
              width: 0;
              height: 100%;
              background-color: aquamarine;
          }
  </style>
  